<template>
  <div class="shopsItem-container">
    <div class="left">
      <img src="../assets/images/f6440d3b288500ae.png" alt="">
    </div>

    <div class="right">
      <h4 class="title">{{ title }}</h4>
      <p class="pingfen">
        <span>
          <i class="fa fa-star" aria-hidden="true"></i>
          <i class="fa fa-star" aria-hidden="true"></i>
          <i class="fa fa-star" aria-hidden="true"></i>
          <i class="fa fa-star" aria-hidden="true"></i>
          <i class="fa fa-star-half-o" aria-hidden="true"></i>
          4.8
        </span>&nbsp;
        <span>月销2千+</span>
        <span class="time">102分钟 | 4.6km</span>
      </p>
      <p class="transport">
        <span>起送￥0 | 基础运费￥5</span>
        <span class="transport-right">达达专送</span>
      </p>
      <p class="coupon">
        <span>领100元卷</span>
        <span>领10元运费卷</span>
        <span>领88元叠加卷</span>
        <i class="fa fa-angle-down"></i>
      </p>
      <p class="fanli">
        <span>返礼</span>
        指定联合利华商品满39元返5元生鲜卷
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    props: ['title']
  }
</script>

<style lang="scss" scoped>
.shopsItem-container{
  display: flex;
  padding: 60px 0 0;
  .left{
    img{
      width: 178px;
      height: 178px;
      border: 1px solid #999;
      border-radius: 14px;
    }
  }
  .right{
    padding: 0 0 60px 25px;
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
    p{
      font-size: 36px;
      margin: 28px 0;
    }
    .title{
      margin: 0;
      font-size: 52px;
    }
    .pingfen{
      span:first-child{
        color: coral;
      }
      .time{
        float: right;
      }
    }
    .transport{
      .transport-right{
        float: right;
        border: 1px solid blue;
        color: blue;
        padding: 0 8px;
        border-radius: 18px 0 18px 0;
      }
    }
    .coupon{
      span{
        padding: 8px 10px;
        color: coral;
        border: 2px solid crimson;
        margin-right: 14px;
        border-bottom: 0;
        border-radius: 18px 0 18px 0;
      }
      i{
        font-size: 50px;
        float: right;
      }
    }
    .fanli{
      margin-bottom: 0;
      span{
        font-weight: bold;
        background-color: crimson;
        color: whitesmoke;
        padding: 0 10px;
        border-radius: 18px 0 18px 0;
      }
    }
  }
}
</style>
